<template>
  <div class="home-container">
    <!-- 侧滑块 -->
    <div :class="[menus ? 'side' : 'side one']">
      <div class="pic">
        <div class="photo" @click="$router.push('/myprofiledetail')">
          <van-image
            slot="icon"
            src="https://z3.ax1x.com/2021/05/15/g6tXiF.png"
            fit="cover"
          />
        </div>
        <div class="text">
          <p class="name">Charlotter</p>
          <p class="email">Charlotter@yahoo.com</p>
        </div>
      </div>
      <van-cell
        class="nav"
        clickable
        :border="false"
        @click="$router.push('/blankpage1')"
      >
        <i slot="title" class="iconfont icon-visible"></i>
        <span slot="right-icon" class="text">我的关注</span>
      </van-cell>
      <van-cell
        class="nav"
        clickable
        :border="false"
        @click="$router.push('/blankpage2')"
      >
        <i slot="title" class="iconfont icon-LikeIcon"></i>
        <span slot="right-icon" class="text">我的收藏</span>
      </van-cell>
      <van-cell
        class="nav"
        clickable
        :border="false"
        @click="$router.push('/message')"
      >
        <i slot="title" class="iconfont icon-youjian"></i>
        <span slot="right-icon" class="text">我的消息</span>
      </van-cell>
      <van-cell
        class="nav"
        clickable
        :border="false"
        @click="$router.push('/blankpage4')"
      >
        <i slot="title" class="iconfont icon-shopping-cart"></i>
        <span slot="right-icon" class="text">购物车</span>
      </van-cell>
      <van-cell
        class="nav"
        clickable
        :border="false"
        @click="$router.push('/blankpage5')"
      >
        <i slot="title" class="iconfont icon-file"></i>
        <span slot="right-icon" class="text">我的订单</span>
      </van-cell>
      <van-cell
        class="nav"
        clickable
        :border="false"
        @click="$router.push('/blankpage1')"
      >
        <i slot="title" class="iconfont icon-puzzle"></i>
        <span slot="right-icon" class="text">优惠券</span>
      </van-cell>
      <van-cell
        class="nav"
        clickable
        :border="false"
        @click="$router.push('/blankpage2')"
      >
        <i slot="title" class="iconfont icon-xinyongka"></i>
        <span slot="right-icon" class="text">我的卡包</span>
      </van-cell>
      <van-cell
        class="nav"
        clickable
        :border="false"
        @click="$router.push('/blankpage4')"
      >
        <i slot="title" class="iconfont icon-shezhi"></i>
        <span slot="right-icon" class="text">设置</span>
      </van-cell>
    </div>
    <div :class="[menus ? 'content' : 'content to']">
      <!-- 顶部菜单 -->
      <van-nav-bar class="top-nav">
        <template #right>
          <van-image
            :src="require('@/assets/cameraicon.png')"
            class="right-icon"
          ></van-image>
        </template>
        <template #title>
          <input type="text" class="search" placeholder="搜索" />
          <i class="iconfont icon-search"></i>
        </template>
        <template #left>
          <van-image
            @click="menus = !menus"
            :src="require('@/assets/logo.png')"
            class="left-icon"
          ></van-image>
        </template>
      </van-nav-bar>
      <!-- 标签页 -->
      <van-tabs
        title-active-color="#262626"
        title-inactive-color="#aeaeae"
        class="tabs"
        color="#4a90e2"
        :swipeable="true"
      >
        <van-tab v-for="item in channels" :key="item.id" :title="item.name">
          <goodslist v-if="item.listtype === 1"></goodslist>
          <goodslist2
            v-else
            :themetype="item.themetype"
            :listtype="item.listtype"
          ></goodslist2>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import goodslist from '@/views/home/components/goodslist'
import goodslist2 from '@/views/home/components/goodslist2.vue'
export default {
  // 定义属性
  data() {
    return {
      menus: true,
      channels: [
        {
          id: 1,
          name: '精选',
          listtype: 1,
          themetype: 0
        },
        {
          id: 2,
          name: '礼物',
          listtype: 2,
          themetype: 1
        },
        {
          id: 3,
          name: '配饰',
          listtype: 2,
          themetype: 2
        },
        {
          id: 4,
          name: '美妆',
          listtype: 2,
          themetype: 3
        },
        {
          id: 5,
          name: '女包',
          listtype: 2,
          themetype: 4
        },
        {
          id: 6,
          name: '女鞋',
          listtype: 2,
          themetype: 5
        }
      ]
    }
  },
  components: {
    goodslist,
    goodslist2
  },
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.home-container {
  height: 95vh;
  position: relative;
  overflow: hidden;
  float: left;
  position: relative;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
  font-family: PingFang-SC-Medium;
  // 侧滑栏
  .side {
    position: absolute;
    width: 518px;
    height: 1334px;
    opacity: 0;
    transform: translateX();
    background: url('~@/assets/bg3.png') no-repeat;
    background-position-x: 470px;
    .pic {
      display: flex;
      margin: 164px 0 108px 60px;
      background-color: transparent;
      .photo {
        .van-image__img {
          width: 126px;
          height: 126px;
        }
        margin-right: 20px;
      }
      .text {
        display: flex;
        justify-content: center;
        flex-direction: column;
        .name {
          margin: 0;
          font-size: 24px;
          line-height: 24px;
          color: #535353;
          margin-bottom: 11px;
        }
        .email {
          margin: 0;
          font-size: 20px;
          line-height: 20px;
          color: #a6a5a5;
        }
      }
    }
    .nav {
      .van-cell__title {
        flex: unset;
      }
      text-align: left;
      display: flex;
      align-items: center;
      padding-left: 147px;
      box-shadow: none;
      background-color: transparent;
      .iconfont {
        font-size: 32px;
        color: #a6a6b0;
        margin-right: 58px;
      }
      .icon-visible {
        font-size: 20px;
        color: #a6a6b0;
      }
      .text {
        font-size: 24px;
        color: #a6a5a5;
      }
    }
  }
  // 顶部菜单
  .van-hairline--bottom::after {
    border: none !important;
  } //去除下划线
  .top-nav {
    padding: 0 59px;
    .van-nav-bar__content {
      height: 88px;
    }
    // 清除vant插槽自带padding
    .van-nav-bar__left {
      padding: unset;
    }
    .van-nav-bar__right {
      padding: unset;
    }
    // 设置顶部导航icon大小
    .left-icon {
      width: 54px;
      height: 60px;
    }
    .right-icon {
      padding: unset;
      width: 60px;
      height: 54px;
    }

    // 设置头部搜索框
    .van-nav-bar__title {
      position: relative;
      max-width: unset;
      input {
        width: 384px;
        height: 56px;
        background-color: #f8f8f8;
        border: none;
        padding-left: 50%;
      }
      ::placeholder {
        font-size: 24px;
        color: #cecece;
        line-height: 56px;
      }
      .iconfont {
        font-size: 24px;
        line-height: 56px;
        left: 40%;
        position: absolute;
        color: #d1d1d1;
      }
    }
  }
  // tab栏
  .tabs {
    height: auto;
    // tab栏高度
    .van-tabs__nav--complete {
      height: 80px;
      padding: 0 30px;
      // tab栏标题
      .van-tab__text {
        font-size: 28px;
      }
      //底部滑动条位置
      .van-tabs__line {
        height: 4px;
        width: 24px;
        bottom: 5px;
        left: -15px;
      }
    }
  }

  .to {
    transform: translateX(518px);
    animation-name: toradius;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
  }
  @keyframes toradius {
    from {
      opacity: 0;
      // transform: translateX(518px);
    }
    to {
      opacity: 1;
      // transform: translateX(0);
    }
  }
  .one {
    opacity: 1;
    transform: translateX(0);
    animation-name: toradius;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
  }
}
</style>
